<template>
    <div id="ClassAverageEchart">

    </div>
</template>

<script setup >
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const props = defineProps({
    data: {
        type: Object,
        default: () => { }
    }
})
// console.log(props.data)

const handleData = ({ studentsData, tagData, classData }) => {
    // console.log(studentsData, tagData, classData)
    let tagList = tagData.map(item => item.title)
    tagList = ['product', ...tagList]
    let studentSoureList = studentsData.map(item => {
        // console.log(item)
        let arr = Object.values(item.score)
        arr = [item.studentname, ...arr]
        return arr
    })
    let source = [tagList,...studentSoureList]
    // console.log(source)
    return source
}
// handleData(props.data)
function seriesFn(){
    let seriesList=[]
    let f =  handleData(props.data).length -1
    for(let i = 0;i<f;i++){
        seriesList.push(
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            }
        )
    }
    seriesList.push({
        
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
            focus: 'self'
        },
        label: {
            formatter: '{b}: {@2012} ({d}%)'
        },
        encode: {
            itemName: handleData(props.data)[0][0],
            value: handleData(props.data)[0][1],
            tooltip: handleData(props.data)[0][1]
        }
    })
    return seriesList
}
onMounted(() => {
    let myChart = echarts.init(document.getElementById('ClassAverageEchart'));
    let option = {
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: handleData(props.data)
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        series: seriesFn()
    };
    myChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });
    myChart.setOption(option);
})

</script>


<style scoped  >

#ClassAverageEchart{
    background: url("../../assets/t_bg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100%;
}

</style>